<script setup lang="ts">
import { getContainerList, removeContainer, startContainer, stopContainer } from '@/api/docker';
import type { UserContainer, UserContainerVO } from '@/api/docker/type';
import { onMounted, ref } from 'vue';

const userContainerList = ref([] as UserContainer[])

onMounted(() => {
    getContainerList().then((res) => {
        userContainerList.value = res.data as UserContainer[];
    })
})

const openEdit = (item: UserContainer) => {

}

const openStart = (id: string) => {
    startContainer(id);
}

const openStop = (id: string) => {
    stopContainer(id);
}

const openRemove = (index: number) => {
    let item = userContainerList.value[index];
    removeContainer(item.id).then(() => {
        userContainerList.value.splice(index, 1);
    })
}

</script>

<template>
    <div class="content">
        <el-table :data="userContainerList" style="width: 100%" stripe border>
            <el-table-column prop="id" label="容器ID" />
            <el-table-column prop="name" label="容器名" />
            <el-table-column prop="userId" label="用户ID" />
            <el-table-column prop="status" label="容器状态" />
            <el-table-column prop="created" label="创建时间" />
            <el-table-column prop="updated" label="更新时间" />
            <el-table-column fixed="right" label="操作" min-width="120">
                <template #default="scope: {row: UserContainer, $index: number}">
                    <el-button link type="primary" size="small" @click="openEdit(scope.row)">修改</el-button>
                    <el-button link type="primary" size="small" @click="openStart(scope.row.id)"
                        v-if="scope.row.status === 1">{{ scope.row.status === 1 ? '运行' : '停止' }}</el-button>
                    <el-button link type="primary" size="small" @click="openStop(scope.row.id)"
                        v-if="scope.row.status === 0">{{ scope.row.status === 0 ? '停止' : '运行'}}</el-button>
                    <el-button link type="primary" size="small" @click="openRemove(scope.$index)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<style lang="scss" scoped></style>